<template>
 <h2>首页</h2>
 <div>
    <ul>
  <li v-for="value in list">{{ value }}</li>
    </ul>
    <div v-if="isShow">
      <h2>{{ count }}</h2>
       <button @click="changeCount">点我count+1</button>
    </div>
    <button @click="isShow =! isShow">显示/隐藏</button>
 </div>
</template>


<script setup lang="ts">
import {ref,watch,onMounted} from 'vue'

  const count = ref(0)
  const isShow = ref(true)
  const list = ['Vue指令', 'ref响应式', '路由跳转']


  function changeCount(){
    count.value+=1
  }

  onMounted(()=>{
    console.log('页面挂载完毕');
    
  })

  watch(count,(X,Y)=>{
    console.log('计数变化：',X,Y);
    
  })
</script>

